<template>
    <!--案件登记页面——开始-->
    <div class="registration" v-loading="loading">
        <div class="left-register">
            <p class="title-name">案件登记</p>
            <div class="register-content">
                <div class="top-box">
                    <div class="block-item">
                        <span class="item-name"><i>*</i>案件来源：</span>
                        <span class="item-value">  
                            <el-select v-model="form.eventSrcType" :disabled='isSourceDisable'>
                                <el-option v-for="item in caseSourceData" :value="item.code" :label="item.name"
                                           :key="item.id" :disabled='item.disabled'></el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">上报电话：</span>
                        <span class="item-value">
                            <el-input v-model="form.eventReportPhone"></el-input>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">上报人姓名：</span>
                        <span class="item-value">
                            <el-input v-model="form.eventReportName"></el-input>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">上报人电话：</span>
                        <span class="item-value">
                            <el-input v-model="form.eventCallPhone"></el-input>
                        </span>
                    </div>
                </div>
                <div class="bottom-box">
                    <div class="block-item">
                        <span class="item-name"><i>*</i>案件类别：</span>
                        <span class="item-value">
                            <el-select v-model="form.eventType" @change="getCaseBigClass">
                                <el-option v-for="item in caseTypeData" :value="item.code" :label="item.name"
                                           :key="item.id"></el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name"><i>*</i>案件大类：</span>
                        <span class="item-value">
                            <el-select v-model="form.eventTypeLv1" @change="getCaseSmallClass"
                                       :disabled="form.eventType === ''">
                                <el-option v-for="item in caseBigClassData" :value="item.id" :label="item.name"
                                           :key="item.id"></el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name"><i>*</i>案件小类：</span>
                        <span class="item-value">
                            <el-select v-model="form.eventTypeLv2" :disabled="form.eventTypeLv1 === ''"
                                       @change="getCaseCondition">
                                <el-option v-for="item in caseSmallClassData" :value="item.id" :label="item.name"
                                           :key="item.id"></el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">处置时限：</span>
                        <span class="item-value">
                            <el-input v-model="form.timeLimit" disabled></el-input>
                        </span>
                    </div>
                    <div class="line-item">
                        <span class="item-name"><i>*</i>立案条件：</span>
                        <span class="item-value">
                            <el-select v-model="form.eventTypeLv3" :disabled="form.eventTypeLv2 === ''"
                                       @change="getOtherInfo">
                                <el-option v-for="item in caseConditionData" :value="item.id" :label="item.name"
                                           :key="item.id"></el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">责任主体：</span>
                        <span class="item-value">
                            <el-input v-model="form.deptParentName" disabled></el-input>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">所属部门：</span>
                        <span class="item-value">
                            <el-input v-model="form.deptName" disabled></el-input>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">一级行业：</span>
                        <span class="item-value">
                            <el-input v-model="form.industryTypeLv1Name" disabled></el-input>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">二级行业：</span>
                        <span class="item-value">
                            <el-input v-model="form.industryTypeLv2Name" disabled></el-input>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">是否延期：</span>
                        <span class="item-value">
                            <el-select v-model="form.isYq" placeholder="" disabled>
                                <!--<el-option value="1" label="是"></el-option>
                                <el-option value="0" label="否"></el-option>-->
                                <el-option
                                        v-for="(item,index) in isYqData"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.code" >
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">是否缓办：</span>
                        <span class="item-value">
                            <el-select v-model="form.isHb" placeholder="" disabled>
                                <!--<el-option value="1" label="是"></el-option>
                                <el-option value="0" label="否"></el-option>-->
                                <el-option
                                        v-for="(item,index) in isHbData"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.code" >
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">是否突发：</span>
                        <span class="item-value">
                            <el-select v-model="form.isTf" placeholder="" disabled>
                               <!-- <el-option value="1" label="是"></el-option>
                                <el-option value="0" label="否"></el-option>-->
                                <el-option
                                        v-for="(item,index) in isTfData"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.code" >
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="block-item">
                        <span class="item-name">是否紧急：</span>
                        <span class="item-value">
                            <el-select v-model="form.isJj" placeholder="" disabled>
                                <!--<el-option value="1" label="是"></el-option>
                                <el-option value="0" label="否"></el-option>-->
                                <el-option
                                        v-for="(item,index) in isJjData"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.code" >
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="line-item">
                        <span class="item-name"><i>*</i>发生位置：</span>
                        <span class="item-value">
                            <el-input v-model="form.eventAddress" disabled></el-input>
                        </span>
                    </div>
                    <div class="line-item">
                        <span class="item-name"><i>*</i>是否开放景区：</span>
                        <span class="item-value">
                            <el-select v-model="form.isOpenScenic" placeholder="">
                                <el-option
                                        v-for="(item,index) in isOpenScenicData"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.code" >
                                </el-option>
                            </el-select>
                        </span>
                    </div>
                    <div class="line-item">
                        <span class="item-name"><i>*</i>案件描述：</span>
                        <span class="item-value">
                            <el-input type="textarea" :rows="2" v-model="form.eventDescribe" maxlength="500"
                                      show-word-limit></el-input>
                        </span>
                    </div>
                </div>
            </div>
            <div class="foot-btn">
                <div class="line-item">
                    <span class="item-name"><i>*</i>图片上传：</span>
                    <el-upload
                            action="#"
                            list-type="picture-card"
                            :auto-upload="false"
                            :file-list="fileList"
                            :on-change="uploadChange"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            ref="upload"
                            style="width:9.65rem">
                        <i slot="default" class="el-icon-plus"></i>
                        <!-- <div slot="file" slot-scope="{file}" >
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <i class="el-icon-zoom-in"></i>
                                </span>
                                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div> -->
                    </el-upload>
                </div>
                <el-button type="primary" size="small" icon="el-icon-check" @click="submitRegister">提交</el-button>
            </div>
            <el-dialog title="查看图片" :visible.sync="viewImageDialog"
                    :close-on-click-modal="false" class="bigImg">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
        <div class="right-map">
            <div id="myMap"></div>
            <div class="marker-position" v-if="positionShow" @click="markerPosition">
                定位
            </div>
            <div class="legend" v-if="positionShow">
                <p>
                    <span>
                        <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" alt="">
                    </span>
                    <span>案件位置</span>
                </p>
                <p>
                    <span>
                        <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png" alt="">
                    </span>
                    <span>设备位置</span>
                </p>
            </div>
            <div class="input-search">
                <el-input id="tipInput" v-model="searchInput" placeholder="请输入关键字"></el-input>
            </div>
        </div>
    </div>
    <!--案件登记页面——结束-->
</template>

<script>
    import { getCaseSource, getCaseCondition, getOtherInfo, submitRegisterInfo, getkfjq, getisyq, getishb, getistf,
        getisjj, getQJData } from '@/api/case/caseOperate'
    import { getcaseType, getcategoryName, getsubclassName } from '@/api/configure/configure'
    import Cookies from 'js-cookie'
    export default {
        name:'Caseregistration',
        data () {
            return {
                // 页面加载
                loading: false,
                fileList:[],
                isSourceDisable:false,
                xPoint:'',
                yPoint:'',
                xPointCopy:'',
                yPointCopy:'',
                positionShow:false,
                // 表单数据
                form: {
                    // 登录的用户id
                    createUser: JSON.parse(localStorage.getItem('userInfo')).userId,
                    // 上传的文件列表
                    params:{
                        image:[]
                    },
                    // 案件来源
                    eventSrcType: '',
                    // 上报电话
                    eventReportPhone: '',
                    // 上报人
                    eventReportName: '',
                    // 上报人电话
                    eventCallPhone: '',
                    // 案件类别
                    eventType: '',
                    // 案件大类
                    eventTypeLv1: '',
                    // 案件小类
                    eventTypeLv2: '',
                    // 处置时限
                    timeLimit: '',
                    // 立案条件
                    eventTypeLv3: '',
                    // 责任主体
                    deptParentCode: '',
                    deptParentName: '',
                    // 所属部门
                    deptCode: '',
                    deptName: '',
                    // 一级行业
                    industryTypeLv1: '',
                    industryTypeLv1Name: '',
                    // 二级行业
                    industryTypeLv2: '',
                    industryTypeLv2Name: '',
                    // 是否延期
                    isYq: '',
                    // 是否缓办
                    isHb: '',
                    // 是否突发
                    isTf: '',
                    // 是否紧急
                    isJj: '',
                    // 发生位置
                    eventAddress: '',
                    // 发生位置X坐标
                    gdx: '',
                    // 发生位置Y坐标
                    gdy: '',
                    // 是否开放景区
                    isOpenScenic: '',
                    // 案件描述
                    eventDescribe: '',
                    // 案件级别（目前没有）
                    eventLevel: 0,
                },
                // 案件来源下拉数据
                caseSourceData: [],
                // 案件类别下拉数据
                caseTypeData: [],
                // 案件大类下拉数据
                caseBigClassData: [],
                // 案件小类下拉数据
                caseSmallClassData: [],
                // 立案条件下拉数据
                caseConditionData: [],
                // 根据立案条件查询责任主体、部门、一级行业、二级行业等信息
                allOtherInfo: {},
                // 地图搜索框绑定参数
                searchInput: '',
                // 标记点位
                marker: null,
                markerEq:null,
                // 是否开放性景区数据
                isOpenScenicData:[],
                // 是否延期数据
                isYqData:[],
                // 是否缓办数据
                isHbData:[],
                // 是否突发事件数据
                isTfData:[],
                // 是否紧急事件数据
                isJjData:[],
                // 曲江边界数据
                qjBoundaryData: [],
                // 高德地图
                GDMap: null,
                // 单个图片查看地址
                dialogImageUrl: '',
                // 查看图片弹出层
                viewImageDialog: false,
            }
        },
        methods: {
            /**
             * Description:删除未上传图片
             * Author:ybt
             * Date:2020/9/21
             */
            handleRemove(file,fileList) {
                this.fileList = fileList
                this.form.params.image = []
                this.fileList.forEach((item,index)=>{
                    if(item.raw){
                        this.getBase64(item.raw).then(res => {
                            this.form.params.image.push(res)
                        });
                    }else{
                        this.getParamsBase64(item.url,(dataUrl)=>{this.form.params.image.push(dataUrl)})
                    }
                
                    
                })
            },
            /**
             * Description:文件状态改变时的钩子
             * Author:ybt
             * Date:2020/9/21
             */
            uploadChange(res){
                this.fileList.push(res)
                if(res.raw){
                    this.getBase64(res.raw).then(response => {
                        this.form.params.image.push(response)
                    });
                }
                
            },
            //将路由带过来的图片转base64
            getParamsBase64(url, callback) {
                //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
                var Img = new Image(),
                dataURL = '';
                Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
                Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
                Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
                var canvas = document.createElement("canvas"), //创建canvas元素
                    width = Img.width, //确保canvas的尺寸和图片一样
                    height = Img.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
                dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
                callback ? callback(dataURL) : null; //调用回调函数
                };
            },
            // 上传的图片转base64
            getBase64(file) {
                return new Promise(function(resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        imgResult = reader.result;
                    };
                    reader.onerror = function(error) {
                        reject(error);
                    };
                    reader.onloadend = function() {
                        resolve(imgResult);
                    };
                });
            },
            /**
             * Description:点击查看图片
             * Author:ybt
             * Date:2020/9/21
             */
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.viewImageDialog = true;
            },
            /**
             * Description:获取曲江边界数据
             * Author:ybt
             * Date:2020/11/5
             */
            getQJData(){
                getQJData({}).then((res) => {
                    this.qjBoundaryData = JSON.parse(res.msg);
                    // 初始化地图
                    this.initMap();
                }).catch((error) => {
                    console.log(error, 'getQJData')
                })
            },
            /**
             * Description:获取是否紧急数据
             * Author:cy
             * Date:2020/10/10
             */
            getisjj(){
                getisjj({}).then((res) => {
                    this.isJjData = res.data
                }).catch((error) => {
                    console.log(error, 'getisjj')
                })
            },
            /**
             * Description:获取是否突发数据
             * Author:cy
             * Date:2020/10/10
             */
            getistf(){
                getistf({}).then((res) => {
                    this.isTfData = res.data
                }).catch((error) => {
                    console.log(error, 'getistf')
                })
            },
            /**
             * Description:获取是否缓办数据
             * Author:cy
             * Date:2020/10/10
             */
            getishb(){
                getishb({}).then((res) => {
                    this.isHbData = res.data
                }).catch((error) => {
                    console.log(error, 'getishb')
                })
            },
            /**
             * Description:获取是否延期数据
             * Author:cy
             * Date:2020/10/10
             */
            getisyq(){
                getisyq({}).then((res) => {
                    this.isYqData = res.data
                }).catch((error) => {
                    console.log(error, 'getisyq')
                })
            },
            /**
             * Description:获取开放景区数据
             * Author:cy
             * Date:2020/10/10
             */
            getkfjq(){
                getkfjq({}).then((res) => {
                    this.isOpenScenicData = res.data
                }).catch((error) => {
                    console.log(error, 'getkfjq')
                })
            },
            /**
             * Description:获取案件来源下拉数据
             * Author:ybt
             * Date:2020/9/23
             */
            getCaseSource(){
                getCaseSource({}).then((res) => {
                    res.data.map(item=>{
                        item.disabled = false
                        if(item.code =='6'){
                            item.disabled = true
                        }
                    })
                    this.caseSourceData = res.data
                }).catch((error) => {
                    console.log(error, 'getCaseSource')
                })
            },
            /**
             * Description:获取案件类别数据
             * Author:ybt
             * Date:2020/9/23
             */
            getCaseType(){
                getcaseType({}).then((res) => {
                    this.caseTypeData = res.data;
                }).catch((error) => {
                    console.log(error, 'getcaseType')
                })
            },
            /**
             * Description:获取案件大类
             * Author:ybt
             * Date:2020/9/23
             */
            getCaseBigClass(){
                this.form.eventTypeLv1 = '';
                this.form.eventTypeLv2 = '';
                this.form.eventTypeLv3 = '';
                this.form.deptParentCode = '';
                this.form.deptParentName = '';
                this.form.deptCode = '';
                this.form.deptName = '';
                this.form.industryTypeLv1 = '';
                this.form.industryTypeLv1Name = '';
                this.form.industryTypeLv2 = '';
                this.form.industryTypeLv2Name = '';
                this.form.isYq = '';
                this.form.isHb = '';
                this.form.isTf = '';
                this.form.isJj = '';
                getcategoryName({type: this.form.eventType}).then((res) => {
                    this.caseBigClassData = res.data;
                }).catch((error) => {
                    console.log(error, 'getcategoryName')
                })
            },
            /**
             * Description:获取案件小类
             * Author:ybt
             * Date:2020/9/23
             */
            getCaseSmallClass(){
                this.form.eventTypeLv2 = '';
                this.form.eventTypeLv3 = '';
                this.form.deptParentCode = '';
                this.form.deptParentName = '';
                this.form.deptCode = '';
                this.form.deptName = '';
                this.form.industryTypeLv1 = '';
                this.form.industryTypeLv1Name = '';
                this.form.industryTypeLv2 = '';
                this.form.industryTypeLv2Name = '';
                this.form.isYq = '';
                this.form.isHb = '';
                this.form.isTf = '';
                this.form.isJj = '';
                getsubclassName({ parentId: this.form.eventTypeLv1}).then((res) => {
                    this.caseSmallClassData = res.data;
                }).catch((error) => {
                    console.log(error, 'getsubclassName')
                })
            },
            /**
             * Description:获取立案条件下拉数据
             * Author:ybt
             * Date:2020/9/23
             */
            getCaseCondition(){
                this.form.eventTypeLv3 = '';
                this.form.deptParentCode = '';
                this.form.deptParentName = '';
                this.form.deptCode = '';
                this.form.deptName = '';
                this.form.industryTypeLv1 = '';
                this.form.industryTypeLv1Name = '';
                this.form.industryTypeLv2 = '';
                this.form.industryTypeLv2Name = '';
                this.form.isYq = '';
                this.form.isHb = '';
                this.form.isTf = '';
                this.form.isJj = '';
                getCaseCondition({id: this.form.eventTypeLv2}).then((res) => {
                    this.caseConditionData = res.data;
                }).catch((error) => {
                    console.log(error, 'getCaseCondition')
                })
            },
            /**
             * Description:根据立案条件查询责任主体、部门、一级行业、二级行业等信息
             * Author:ybt
             * Date:2020/9/23
             */
            getOtherInfo(){
                this.form.deptParentCode = '';
                this.form.deptParentName = '';
                this.form.deptCode = '';
                this.form.deptName = '';
                this.form.industryTypeLv1 = '';
                this.form.industryTypeLv1Name = '';
                this.form.industryTypeLv2 = '';
                this.form.industryTypeLv2Name = '';
                this.form.isYq = '';
                this.form.isHb = '';
                this.form.isTf = '';
                this.form.isJj = '';
                getOtherInfo({id: this.form.eventTypeLv3}).then((res) => {
                    this.allOtherInfo = res.data;
                    // 责任主体
                    this.form.deptParentCode = this.allOtherInfo.parentDeptCode;
                    this.form.deptParentName = this.allOtherInfo.parentDeptName;
                    // 所属部门
                    this.form.deptCode = this.allOtherInfo.deptCode;
                    this.form.deptName = this.allOtherInfo.deptName;
                    // 一级行业
                    this.form.industryTypeLv1 = this.allOtherInfo.industryTypeLv1;
                    this.form.industryTypeLv1Name = this.allOtherInfo.industryTypeLv1Name;
                    // 二级行业
                    this.form.industryTypeLv2 = this.allOtherInfo.industryTypeLv2;
                    this.form.industryTypeLv2Name = this.allOtherInfo.industryTypeLv2Name;
                    // 是否延期
                    this.form.isYq = this.allOtherInfo.isYq;
                    // 是否缓办
                    this.form.isHb = this.allOtherInfo.isHb;
                    // 是否突发
                    this.form.isTf = this.allOtherInfo.isTf;
                    // 是否紧急
                    this.form.isJj = this.allOtherInfo.isJj;
                }).catch((error) => {
                    console.log(error, 'getOtherInfo')
                })
            },
            /**
             * Description:初始化地图
             * Author:ybt
             * Date:2020/9/23
             */
            initMap(){
                // 高德地图初始化
                this.GDMap = new AMap.Map('myMap', {
                    zoom: 13,
                    viewMode: '3D',
                    center: [108.99569,34.20124],
                    resizeEnable: true,
                });
                if (this.qjBoundaryData.type === 'Polygon') { // 单面
                    this.AcquisitionLine(this.qjBoundaryData.coordinates)
                } else if (this.qjBoundaryData.type === 'MultiPolygon') { // 多面
                    this.qjBoundaryData.coordinates.forEach(value => {
                        this.AcquisitionLine(value);
                    })
                } else if (this.qjBoundaryData.type === 'LineString') { // 单线
                    this.AcquisitionLine(this.qjBoundaryData.coordinates[0])
                } else if (this.qjBoundaryData.type === 'MultiLineString') { // 多线
                    this.qjBoundaryData.coordinates.forEach(value => {
                        this.AcquisitionLine(value);
                    })
                }
                // if(this.xPoint && this.yPoint){
                //     this.markPoint(this.GDMap, this.xPoint, this.yPoint);
                // }
                this.GDMap.on('click', (e) => {
                    let {lng,lat} = e.lnglat;
                    this.xPoint = lng;
                    this.yPoint = lng;
                    this.markPoint(this.GDMap, lng, lat);
                });
                //输入提示
                let autoOptions = {
                    input: "tipInput",
                    city: "西安", //城市，默认：“全国”
                    citylimit: true,
                };
                let auto = new AMap.Autocomplete(autoOptions);
                AMap.event.addListener(auto, "select", (e) => {
                    // 注册监听，当选中某条记录时会触发
                    this.markPoint(this.GDMap, e.poi.location.lng, e.poi.location.lat);
                });
            },
            /**
             * Description:画曲江边界
             * Author:ybt
             * Date:2020/7/29
             */
            AcquisitionLine(item){
                // 曲江边界
                let Polygon = new AMap.Polygon({
                    map: this.GDMap,
                    path: item,
                    strokeColor: '#ff0000',
                    strokeOpacity: 0.6,
                    strokeWeight: 2,
                    strokeStyle: "dashed",
                    fillColor: '',
                    fillOpacity: 0.6,
                    zIndex: 50,
                    bubble: true,
                });
                this.GDMap.setFitView(Polygon);// 执行定位
            },
            /**
             * Description:地图标记点位
             * Author:ybt
             * Date:2020/9/23
             */
            markPoint(GDMap, lng, lat){
                // 发生位置X坐标
                this.form.gdx = lng;
                // 发生位置Y坐标
                this.form.gdy = lat;
                // 清除标记点位
                if (this.marker) {
                    this.marker.setMap(null);
                    this.marker = null;
                }
                if (this.form.gdx === '' || this.form.gdy === '') {
                    return
                }
                // 这里通过高德 SDK 完成。
                let geocoder = new AMap.Geocoder({
                    city: "西安"//城市，默认：“全国”
                });
                geocoder.getAddress([lng, lat], (status, result) => {
                    if (status === 'complete' && result.info === 'OK') {
                        if (result && result.regeocode) {
                            this.form.eventAddress = result.regeocode.formattedAddress; //获取到位置
                        }
                    }
                });
                
                // 以下为标记点位
                // 创建一个 Icon
                let startIcon = new AMap.Icon({
                    size: new AMap.Size(40, 40),
                    image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
                    imageSize: new AMap.Size(20, 30),
                });
                // 添加点标记
                this.marker = new AMap.Marker({
                    icon: startIcon, // 点标记的图标
                    position: [this.form.gdx, this.form.gdy], // 点标记的坐标
                    clickable: true, // 点标记是否可以点击
                });
                this.marker.setMap(GDMap); // 将点标记添加到地图
                this.GDMap.setCenter([this.form.gdx, this.form.gdy]);// 执行定位
            },
            /**
             * Description:提交登记信息
             * Author:ybt
             * Date:2020/9/23
             */
            
            submitRegister(){
                this.loading = true;
                
                if (this.form.eventSrcType === '') {
                    this.$message.error('请选择案件来源');
                    this.loading = false;
                    return
                } else if (this.form.eventType === '') {
                    this.$message.error('请选择案件类别');
                    this.loading = false;
                    return
                } else if (this.form.eventTypeLv1 === '') {
                    this.$message.error('请选择案件大类');
                    this.loading = false;
                    return
                } else if (this.form.eventTypeLv2 === '') {
                    this.$message.error('请选择案件小类');
                    this.loading = false;
                    return
                } else if (this.form.eventTypeLv3 === '') {
                    this.$message.error('请选择立案条件');
                    this.loading = false;
                    return
                } else if (this.form.eventAddress === '') {
                    this.$message.error('请定位发生位置');
                    this.loading = false;
                    return
                } else if (this.form.isOpenScenic === '') {
                    this.$message.error('请选择是否开放景区');
                    this.loading = false;
                    return
                } else if (this.form.eventDescribe === '') {
                    this.$message.error('请输入案件描述');
                    this.loading = false;
                    return
                }else if(this.form.params.image.length === 0){
                    this.$message.error('请上传案件图片');
                    this.loading = false;
                    return
                }
               
                submitRegisterInfo(this.form).then(() => {
                    this.$message.success('登记成功')
                    this.loading = false;
                    this.positionShow = false
                    this.form = {
                        createUser: JSON.parse(localStorage.getItem('userInfo')).userId,
                        eventSrcType: '',
                        eventReportPhone: '',
                        eventReportName: '',
                        eventCallPhone: '',
                        eventType: '',
                        eventTypeLv1: '',
                        eventTypeLv2: '',
                        timeLimit: '',
                        eventTypeLv3: '',
                        deptParentCode: '',
                        deptParentName: '',
                        deptCode: '',
                        deptName: '',
                        industryTypeLv1: '',
                        industryTypeLv1Name: '',
                        industryTypeLv2: '',
                        industryTypeLv2Name: '',
                        isYq: '',
                        isHb: '',
                        isTf: '',
                        isJj: '',
                        eventAddress: '',
                        gdx: '',
                        gdy: '',
                        eventDescribe: '',
                        eventLevel: 0,
                        params:{
                            image:[]
                        }
                    };
                    this.fileList = []
                    this.isSourceDisable = false
                    this.xPoint = ''
                    this.yPoint = ''
                    this.$refs.upload.clearFiles()
                    this.searchInput = '';
                    this.markPoint(null, '', '');
                    this.markerEq.setMap(null);
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'submitRegisterInfo')
                })
            },
            // 获取路由所带参数并渲染
            getParamsData(){
                this.positionShow = false
                this.fileList= []
                this.form.params.image = []
                let arr = Object.keys(this.$route.params)
                if(this.$route.params && arr.length!=0){
                    this.positionShow = true;
                    let {id,images,content,geometry,isResponse,reportName,reportPhone,gcjGeometry} = this.$route.params
                    // 案件点位
                    this.xPoint = (JSON.parse(geometry).coordinates)[0]
                    this.yPoint = (JSON.parse(geometry).coordinates)[1]
                    this.xPointCopy = (JSON.parse(geometry).coordinates)[0]
                    this.yPointCopy = (JSON.parse(geometry).coordinates)[1]
                    // 设备点位
                    let x = (JSON.parse(gcjGeometry).coordinates)[0]
                    let y = (JSON.parse(gcjGeometry).coordinates)[1]
                    // 添加点标记
                    let startIcon = new AMap.Icon({
                        size: new AMap.Size(40, 40),
                        image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_rs.png',
                        imageSize: new AMap.Size(20, 30),
                    });
                    this.markerEq = new AMap.Marker({
                        icon: startIcon, // 点标记的图标
                        position: [x, y], // 点标记的坐标
                        clickable: true, // 点标记是否可以点击
                    });
                     // 将点标记添加到地图
                    //案件来源为市民上报，并不可选择
                    this.form.eventSrcType = '6'
                    this.isSourceDisable = true
                    //案件描述
                    this.form.eventDescribe = content
                    
                    setTimeout(() => {
                        this.markerEq.setMap(this.GDMap);
                        this.markPoint(this.GDMap, this.xPoint, this.yPoint);
                    }, 500);

                    this.form.qrcodeEventId = id
                    // 是否回复为是（0），填充上报人姓名和上报人电话
                    if(isResponse=='0'){
                        this.form.eventReportName = reportName
                        this.form.eventCallPhone = reportPhone
                    }else{
                        this.form.eventReportName = ''
                        this.form.eventCallPhone = ''
                    }
                    
                    if(images){
                        images.forEach(item=>{
                        this.fileList.push({'url':item,status: "ready"})
                        this.getParamsBase64(item,(dataUrl)=>{this.form.params.image.push(dataUrl)})
                    })
                    }
                    
            }
            },
            markerPosition(){
                this.markPoint(this.GDMap, this.xPointCopy, this.yPointCopy);
            }
        },
        created(){
            // 获取曲江边界数据
            this.getQJData();
            // 获取案件来源下拉数据
            this.getCaseSource();
            // 获取案件类别下拉数据
            this.getCaseType();
            // 获取开放景区数据
            this.getkfjq();
            // 获取是否延期数据
            this.getisyq();
            // 获取是否缓办数据
            this.getishb();
            // 获取是否突发数据
            this.getistf();
            // 获取是否紧急时间数据
            this.getisjj();
            //获取路由所带参数
            this.getParamsData()
        },
        mounted () {
           
        },
        watch:{
            $route(){
                this.getParamsData()
            }
        }
    }
</script>

<style lang="scss">
    .registration{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        padding: 0.1875rem;
        overflow: hidden;
        .left-register{
            display: flex;
            flex-direction: column;
            width: 55%;
            background-color: #FFFFFF;
            border: 0.0125rem solid #A40000;
            overflow: hidden;
            .title-name{
                height: 0.4375rem;
                line-height: 0.4375rem;
                background: #A40000;
                text-align: center;
                color: #fff;
                font-size: 0.225rem;
                margin: 0 !important;
            }
            .register-content{
                display: flex;
                flex-direction: column;
                overflow: auto;
                .top-box,.bottom-box{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    padding-right: 0.25rem;
                }
                .top-box{
                    margin: 0.125rem 0;
                    border-bottom: 0.0125rem solid #ddd;
                }
                .line-item{
                    display: flex;
                    width: 100%;
                    margin-bottom: 0.125rem;
                }
                .block-item{
                    display: flex;
                    width: 50%;
                    margin-bottom: 0.125rem;
                }
                .item-name{
                    width: 1.5rem;
                    text-align: right;
                    padding-right: 0.125rem;
                    line-height: 0.425rem;
                    font-size: 0.175rem;
                    cursor: default;
                    i{
                        font-size: 0.225rem;
                        color: #f00;
                        padding-right: 0.0375rem;
                    }
                }
                .item-value{
                    flex: 1;
                    .el-input input{
                        height: 0.425rem;
                        line-height: 0.425rem;
                    }
                    .el-select{
                        width: 100%;
                    }
                }
            }
            .foot-btn{
                border-top: 0.0125rem solid #ddd;
                padding: 0.125rem 0.25rem;
                text-align: right;
                .line-item{
                    display: flex;
                    width: 100%;
                    margin-bottom: 0.125rem;
                    text-align: left;
                    .item-name{
                        width: 1.2625rem;
                        text-align: left;
                        line-height: 0.425rem;
                        font-size: 0.175rem;
                        cursor: default;
                        padding-left: 0.125rem;
                        i{
                            font-size: 0.225rem;
                            color: #f00;
                            padding-right: 0.0375rem;
                        }
                    }
                    .el-upload-list__item:nth-of-type(5n){
                        margin-right: 0rem;
                    }
                }
            }
        }
        .right-map{
            width: 45%;
            background-color: #FFFFFF;
            border: 0.0125rem solid #A40000;
            position: relative;
            #myMap{
                width: 100%;
                height: 100%;
            }
            .marker-position{
                position: absolute;
                width: 0.75rem;
                height: 0.35rem;
                z-index: 999;
                top: 0.1625rem;
                left: 3.3125rem;
                border-radius: 0.0625rem;
                background: #fff;
                border: 1px solid #ccc;
                text-align: center;
                line-height: 0.35rem;
                cursor: pointer;
                -moz-user-select:none; /*火狐*/
                -webkit-user-select:none; /*webkit浏览器*/
                -ms-user-select:none; /*IE10*/
                -khtml-user-select:none; /*早期浏览器*/
                user-select:none;

            }
            .legend{
                position: absolute;
                bottom: 0.0625rem;
                right: 0.0625rem;
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 0.0625rem;
                width: 1.625rem;
                -moz-user-select:none; /*火狐*/
                -webkit-user-select:none; /*webkit浏览器*/
                -ms-user-select:none; /*IE10*/
                -khtml-user-select:none; /*早期浏览器*/
                user-select:none;
                p{
                    width: 100%;
                    height: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span:nth-of-type(1){
                        margin-right: 0.125rem;
                        width: 0.25rem;
                        height: 0.375rem;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    span:nth-of-type(2){
                        font-size: 0.175rem;
                    }
                }
            }
            .input-search{
                position: absolute;
                top: 0.125rem;
                left: 0.125rem;
                .el-input{
                    width: 3rem;
                }
            }
        }
    }
</style>
